﻿<UserControl x:Class="WeatherClockWidget.WeatherClock"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:this="clr-namespace:WeatherClockWidget" Height="580" Width="226">
    <UserControl.Resources>
        <Storyboard x:Key="SwitchPictureAnim">
            <DoubleAnimation Storyboard.TargetName="PictureTranslate" Storyboard.TargetProperty="X" From="0" To="-250" Duration="0:0:0.7" AccelerationRatio="0.6" Completed="DoubleAnimation_Completed" FillBehavior="Stop"/>
        </Storyboard>
        <SolidColorBrush x:Key="TileColor" Color="#0f92d6"/>
        <SolidColorBrush x:Key="FontColor" Color="White"/>
    </UserControl.Resources>
    <Grid RenderTransformOrigin="0,0">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="Scale" ScaleX="1" ScaleY="{Binding ElementName=Scale, Path=ScaleX}"/>
        </Grid.RenderTransform>
        <Grid.RowDefinitions>
            <RowDefinition Height="115"/>
            <RowDefinition Height="115"/>
            <RowDefinition Height="115"/>
            <RowDefinition Height="115"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="115"/>
            <ColumnDefinition Width="115"/>
        </Grid.ColumnDefinitions>
        <Grid Name="ClockGrid" Height="110" Background="{StaticResource TileColor}" Grid.Row="1" Grid.ColumnSpan="2" Opacity="1">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Name="Hours" Text="22" Foreground="{StaticResource FontColor}" FontSize="72"  RenderTransformOrigin="0.5,1">
                    <TextBlock.RenderTransform>
                        <TransformGroup>
                           <ScaleTransform x:Name="HoursScale" ScaleX="1" ScaleY="1"/>
                            <TranslateTransform x:Name="HoursTranslate"/>
                        </TransformGroup>
                    </TextBlock.RenderTransform>
                    <TextBlock.Resources>
                        <Storyboard x:Key="UpdateAnim">
                            <DoubleAnimation Storyboard.TargetName="HoursScale" Storyboard.TargetProperty="ScaleY" From="1" To="0.8" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                            <DoubleAnimation Storyboard.TargetName="MinutesTranslate" Storyboard.TargetProperty="Y" From="0" To="10" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                            <DoubleAnimation Storyboard.TargetName="HoursScale" BeginTime="0:0:0.05" Storyboard.TargetProperty="ScaleY" From="0.8" To="1" Duration="0:0:0.1" AccelerationRatio="0.3"/>
                            <DoubleAnimation Storyboard.TargetName="MinutesTranslate" BeginTime="0:0:0.05" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                        </Storyboard>
                    </TextBlock.Resources>
                </TextBlock>
                <TextBlock Text=":" Foreground="{DynamicResource FontColor}" FontSize="72"/>
                <Grid>
                    <TextBlock Name="Minutes" Text="00" Foreground="{StaticResource FontColor}" FontSize="72" RenderTransformOrigin="0.5,1">
                         <TextBlock.RenderTransform>
                             <TransformGroup>
                                 <ScaleTransform x:Name="MinutesScale" ScaleX="1" ScaleY="1"/>
                                 <TranslateTransform x:Name="MinutesTranslate"/>
                             </TransformGroup>
                         </TextBlock.RenderTransform>
                        <TextBlock.Resources>
                          <Storyboard x:Key="UpdateAnim">
                              <DoubleAnimation Storyboard.TargetName="MinutesScale" Storyboard.TargetProperty="ScaleY" From="1" To="0.8" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                              <DoubleAnimation Storyboard.TargetName="MinutesTranslate" Storyboard.TargetProperty="Y" From="0" To="10" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                              <DoubleAnimation Storyboard.TargetName="MinutesScale" BeginTime="0:0:0.05" Storyboard.TargetProperty="ScaleY" From="0.8" To="1" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                              <DoubleAnimation Storyboard.TargetName="MinutesTranslate" BeginTime="0:0:0.05" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.03" AccelerationRatio="0.3"/>
                          </Storyboard>
                        </TextBlock.Resources>
                    </TextBlock>
                </Grid>
            </StackPanel>
        </Grid>
        <Grid Name="UserGrid" Grid.Row="0" Grid.Column="1"  Margin="0,0,0,0" Background="{DynamicResource TileColor}" Height="110" Width="110"
              HorizontalAlignment="Right" ClipToBounds="True" VerticalAlignment="Top" Drop="UserGrid_Drop">
            <TextBlock Foreground="{StaticResource FontColor}"  Margin="5" TextWrapping="Wrap" Text="Me" FontSize="26" FontWeight="Light">
                <TextBlock.RenderTransform>
                    <TranslateTransform x:Name="MeCaptionTranslate"/>
                </TextBlock.RenderTransform>
            </TextBlock>
            <Grid Name="UserPicGrid" Background="{StaticResource TileColor}">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="UserPicTranslate"/>
                </Grid.RenderTransform>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Grid.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimation Storyboard.TargetName="UserPicTranslate" BeginTime="0:0:6" Storyboard.TargetProperty="Y" From="0" To="70" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.6"/>
                                <DoubleAnimation Storyboard.TargetName="MeCaptionTranslate" BeginTime="0:0:6" Storyboard.TargetProperty="Y" From="-20" To="30" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.6"/>
                                <DoubleAnimation Storyboard.TargetName="UserPicTranslate" BeginTime="0:0:13" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.6" AccelerationRatio="0.2" DecelerationRatio="0.6"/>
                                <DoubleAnimation Storyboard.TargetName="MeCaptionTranslate" BeginTime="0:0:13.05" Storyboard.TargetProperty="Y" To="-40" Duration="0:0:0.6" AccelerationRatio="0.1" DecelerationRatio="0.6"/>

                                <DoubleAnimation Storyboard.TargetName="UserPicTranslate" BeginTime="0:0:19" Storyboard.TargetProperty="Y" From="0" To="110" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.6"/>
                                <DoubleAnimation Storyboard.TargetName="MeCaptionTranslate" BeginTime="0:0:19" Storyboard.TargetProperty="Y" From="-20" To="70" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.6"/>
                                <DoubleAnimation Storyboard.TargetName="UserPicTranslate" BeginTime="0:0:24" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.6" AccelerationRatio="0.2" DecelerationRatio="0.6"/>
                                <DoubleAnimation Storyboard.TargetName="MeCaptionTranslate" BeginTime="0:0:24.05" Storyboard.TargetProperty="Y" To="-40" Duration="0:0:0.6" AccelerationRatio="0.1" DecelerationRatio="0.6"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Image Name="UserPic" RenderOptions.BitmapScalingMode="HighQuality" Stretch="UniformToFill" HorizontalAlignment="Center"/>
            </Grid>
        </Grid>
        <Grid Grid.Row="0" Grid.Column="0"  Margin="0,0,0,0" Background="{DynamicResource TileColor}" Height="110" Width="110" HorizontalAlignment="Right" VerticalAlignment="Top">
            <TextBlock Name="Month" Text="December" FontSize="16" Foreground="{DynamicResource FontColor}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0" />
            <TextBlock Name="Day" Text="25" FontSize="54" Foreground="{DynamicResource FontColor}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,10,0,0"/>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="1" Name="WeatherGrid" Margin="0,3,0,0" Background="{StaticResource TileColor}" Width="110" Height="110" ClipToBounds="True" HorizontalAlignment="Right" Opacity="1">
            <TextBlock Name="NowSky" Foreground="{StaticResource FontColor}"  Margin="5" TextWrapping="Wrap"/>
            <TextBlock Name="Location" Foreground="{StaticResource FontColor}" FontSize="16" VerticalAlignment="Bottom"  Margin="5" TextTrimming="CharacterEllipsis"/>
            <Grid Name="WeatherIconGrid" Background="{StaticResource TileColor}">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="WeatherIconTranslate"/>
                </Grid.RenderTransform>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimation Storyboard.TargetName="WeatherIconTranslate" BeginTime="0:0:8" Storyboard.TargetProperty="Y" From="0" To="-30" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="WeatherIconTranslate" BeginTime="0:0:10" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.6" AccelerationRatio="0.2" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="WeatherIconTranslate" BeginTime="0:0:16" Storyboard.TargetProperty="Y" From="0" To="40" Duration="0:0:0.6" AccelerationRatio="0.4" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="WeatherIconTranslate" BeginTime="0:0:18" Storyboard.TargetProperty="Y" To="110" Duration="0:0:0.5" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="WeatherIconTranslate" BeginTime="0:0:21" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Image Name="Icon" Margin="20"/>
                <TextBlock Name="Weather" Foreground="{StaticResource FontColor}" Text="Weather" FontWeight="Light" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,5"/>
            </Grid>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="0" Margin="0,3,0,0" Background="{StaticResource TileColor}" Width="110" Height="110" ClipToBounds="True" HorizontalAlignment="Left">
            <TextBlock Name="High" FontSize="16" Foreground="{StaticResource FontColor}" Margin="0,5,5,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
            <TextBlock Name="Low" FontSize="16" Foreground="{StaticResource FontColor}" Margin="0,0,5,5" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
            <Grid Name="TempGrid" Background="{StaticResource TileColor}">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="TempTranslate"/>
                </Grid.RenderTransform>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimation Storyboard.TargetName="TempTranslate" BeginTime="0:0:4" Storyboard.TargetProperty="X" From="0" To="-50" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="TempTranslate" BeginTime="0:0:7" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="TempTranslate" BeginTime="0:0:13" Storyboard.TargetProperty="X" To="-110" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                                <DoubleAnimation Storyboard.TargetName="TempTranslate" BeginTime="0:0:15" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.6" AccelerationRatio="0.3" DecelerationRatio="0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <TextBlock Name="NowTemp" Foreground="{StaticResource FontColor}" FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0"/>
            </Grid>
        </Grid>
        <Grid Name="ForecastPanel" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,0,0" Background="{StaticResource TileColor}" Height="110" VerticalAlignment="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <this:ForecastItem x:Name="FItem2" Order="2" Grid.Column="0" Foreground="{DynamicResource FontColor}"/>
            <this:ForecastItem x:Name="FItem3" Order="0" Grid.Column="1" Foreground="{DynamicResource FontColor}"/>
            <this:ForecastItem x:Name="FItem4" Order="3" Grid.Column="2" Foreground="{DynamicResource FontColor}"/>
            <this:ForecastItem x:Name="FItem5" Order="1" Grid.Column="3" Foreground="{DynamicResource FontColor}"/>
        </Grid>
        <Grid Grid.Row="4" Grid.ColumnSpan="2" Name="PicturesGrid" Margin="0,5,0,0" Height="110" Background="{DynamicResource TileColor}">
            <Image Name="PictureBg"  Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality">
                <Image.RenderTransform>
                    <TranslateTransform x:Name="PictureBgTranslate"/>
                </Image.RenderTransform>
            </Image>
            <Image Name="Picture"  Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality">
                <Image.RenderTransform>
                    <TranslateTransform x:Name="PictureTranslate"/>
                </Image.RenderTransform>
            </Image>
            <TextBlock Text="Pictures" Foreground="{DynamicResource FontColor}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,5"/>
        </Grid>
    </Grid>
</UserControl>
